<template>
  <view 
    v-if="!isLoggedIn" 
    class="bg-gradient-to-r from-red-500 to-red-600 text-white p-4 mb-4 rounded-lg mx-4 mt-4"
  >
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <text class="text-2xl mr-2">⚠️</text>
        <view>
          <text class="text-[28rpx] font-bold block">您还未登录</text>
          <text class="text-[24rpx] opacity-90">登录后才能购买商品</text>
        </view>
      </view>
      <view 
        class="bg-white text-red-500 px-4 py-2 rounded-full text-[24rpx] font-bold"
        @tap="goToLogin"
      >
        去登录
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import { useDidShow } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { localStg } from '@/utils'

// 登录状态
const isLoggedIn = ref(false)

// 检查登录状态
const checkLoginStatus = () => {
  const openid_Stg = localStg.get('openid')
  isLoggedIn.value = !!openid_Stg
  console.log('登录状态检查:', isLoggedIn.value, 'openid:', openid_Stg)
}

// 跳转到登录页面
const goToLogin = () => {
  Taro.navigateTo({
    url: '/package-other/login/login'
  })
}

// 检查是否需要登录并显示提示
const requireLogin = (options?: { 
  title?: string 
  content?: string 
  showModal?: boolean 
}) => {
  const { 
    title = '提示',
    content = '请先登录才能继续操作',
    showModal = true
  } = options || {}

  if (!isLoggedIn.value) {
    if (showModal) {
      Taro.showModal({
        title,
        content,
        showCancel: true,
        cancelText: '取消',
        confirmText: '去登录',
        success: (res) => {
          if (res.confirm) {
            goToLogin()
          }
        }
      })
    }
    return false
  }
  return true
}

// 页面显示时检查登录状态
useDidShow(() => {
  checkLoginStatus()
})

// 初始化检查
checkLoginStatus()

// 暴露方法和状态
defineExpose({
  isLoggedIn,
  checkLoginStatus,
  requireLogin,
  goToLogin
})
</script>

<style lang="scss" scoped>
// 样式已经在 template 中使用 Tailwind CSS 类
</style> 